<template>
    <div class="goods-type">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/business' }">后台管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>商品类别</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="goods-type-body">
            <el-button type="primary" class="add-btn" @click="addType">添加分类</el-button>
            <el-table
                    :data="$store.state.goodsType"
                    border
                    style="width: 811px;">
                <el-table-column
                        type="index"
                        label="#"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="分类名称"
                        prop="label"
                        width="200">
                </el-table-column>
                <el-table-column type="expand"
                                 label="子类别"
                                 width="150"
                >
                    <template slot-scope="scope">
                        <goods-type-item :tableData="scope.row.children"></goods-type-item>
                    </template>
                </el-table-column>
                <el-table-column
                        width="180"
                        label="层次">
                    <el-tag>一级分类</el-tag>
                </el-table-column>

            </el-table>
        </div>
        <type-form :form-data="formData" class="form" v-show="isAdd" :isEdit="isEdit" @reset="reset"></type-form>
        <shade v-show="isAdd"></shade>

    </div>
</template>

<script>
    import GoodsTypeItem from "components/content/business/goodsType/GoodsTypeItem";
    import TypeForm from "../../../components/content/business/goodsType/TypeForm";

    import Shade from "../../../components/common/shade/Shade";
    import {eventBus} from "../../../common/util";

    export default {
        name: "GooodSubject",
        data() {
            return {
                isAdd: false,
                formData: {},
                isEdit: false
            }
        },
        mounted() {
            eventBus.$on('editType', (scope)=> {
                this.formData = {
                    title: scope.row.label,
                    value: Math.floor(scope.row.value / 1000) * 1000,
                    code: scope.row.value
                }
                console.log(this.formData)
                this.isAdd = true
                this.isEdit = true
            })
        },
        components: {
            GoodsTypeItem,
            TypeForm,

            Shade
        },
        methods: {
            addType() {
                this.isAdd = true
            },
            reset() {
                this.isAdd = false;
                 this.formData = {};
            },
        }
    }
</script>

<style scoped>
    .goods-type {
        position: relative;
    }
    .goods-type-body {
        margin-top: 20px;
        width: 811px;
        background-color: rgb(255, 255,255);
        padding: 30px;
        box-shadow: 2px 2px 2px #cccccc;
    }
    .add-btn {
        margin-bottom: 20px;
    }
    .form {
        position: absolute;
        z-index: 9;
        top: 20%;
        left: 25%;
    }
</style>